<template>
  <div class="right">
    <h3>在线答疑</h3>
    <!-- 输入框 -->
    <div class="ipt">
      <text>对该系统使用有哪些问题都可以帮您解决</text>
      <input class="search-input" type="text" placeholder="请输入您的问题" />
    </div>
    <!-- 问题 -->
    <div class="question">
      <div class="question-item" v-for="item in questionList" :key="item">
        <div class="question-time">01/20 15:27</div>
        <div class="content" v-for="body in item.bodys" :key="body">
          <div class="left">
            <el-icon color="#409EFF"><ChatLineSquare /></el-icon>
          </div>
          <div class="body-right">
            <div class="title">{{ item.title }}</div>
            <div class="body">
              {{ body.val }}
            </div>
            <span>{{ body.time }}</span>
          </div>
        </div>
      </div>
    </div>
    <!-- 查看更多 -->
    <text class="more">查看更多</text>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { ChatLineSquare } from '@element-plus/icons-vue'

const questionList = ref([
  {
    title: '在中国网上骂墨西哥毒枭，会被跨国追杀吗？',
    bodys: [
      {
        val: '',
        time: ''
      }
    ]
  },
  {
    title: '在中国网上骂墨西哥毒枭，会被跨国追杀吗？',
    bodys: [
      {
        val: '我痛恨这类事情，我并不在乎悲伤的离别还是不痛快的离别。只要是离开一个地方，我总希望离开的时候自己心中有数，要不然，我心里就会更加难受。 我痛恨这类事情，我并不在乎悲伤的离别还是不痛快的离别。 只要是离开一个地方，我总希望离开的时候自己心中有数，要不然，我心里就会更加难受。我痛恨这类事情，我并不在乎悲伤的离别还是不痛快的离别。 只要是离开一个地方，我总希望离开的时候自己心中有数，要不然，我心里就会更加难受。',
        time: '回答时间:2022-1-20'
      }
    ]
  },
  {
    title: '秘鲁紧急抄作业，没想到疫情竟然更严重了！',
    bodys: [
      {
        val: '你受这种教育到了一定程度，就会发现自己脑子的尺寸，以及什么对它合适，什么对它不合适。过了一个时期，你就会心里有数，知道像你这样尺寸的头...',
        time: '回答时间:2022-1-20'
      }
    ]
  },
  {
    title: '关于视频号，日更20天的一点思考',
    bodys: [
      {
        val: '安多里尼先生又点了支香烟。他抽的凶极了。接着他说：“坦白说，我简直不知道跟你说什么好，霍尔顿。”',
        time: '回答时间:2022-1-20'
      }
    ]
  }
])
</script>

<style lang="scss" scoped>
.right {
  padding: 32px 40px;
  background-color: #fff;
  max-width: 411px;
  h3 {
    font-size: 20px;
    font-weight: 600;
    line-height: 28px;
    color: #131414;
  }

  // 输入框
  .ipt {
    margin-top: 29px;
    text {
      font-size: 14px;
      line-height: 24px;
      color: #909399;
    }
    .search-input {
      margin-top: 12px;

      padding: 8px 0 8px 12px;
      width: 100%;
      height: 100%;
      outline: none;
      border: 1px solid #dcdfe6;

      &::-webkit-input-placeholder {
        font-size: 14px;
        line-height: 24px;
        display: flex;
        align-items: center;
        color: #c0c4cc;
      }
    }

    .search-input:focus {
      box-shadow: none;
    }
  }

  // 问题
  .question {
    margin-top: 29px;
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 29px;

    .question-item {
      .question-time {
        text-align: center;
        font-size: 12px;
        line-height: 20px;
        color: #c0c4cc;
      }

      .content {
        display: flex;
        align-items: start;

        .body-right {
          .title {
            white-space: nowrap;
            font-size: 14px;
            line-height: 24px;
            color: #131414;
          }
          .body {
            font-size: 12px;
            line-height: 20px;
            color: #909399;
          }
          span {
            font-size: 12px;
            line-height: 20px;
            color: #606266;
          }
        }
      }
    }
  }

  .more {
    margin-top: 29px;
    padding: 4px 0;
    display: inline-block;
    width: 100%;
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
    text-align: center;
    color: #409eff;
    cursor: pointer;
  }
}
</style>
